<template>
    <div class="toolbar-container">
        <div class="toolbar-left">
            <el-button-group>
                <el-button plain icon="ArrowLeft" :disabled="undoEnabled" @click="handleUndo"></el-button>
                <el-button plain icon="ArrowRight" :disabled="redoEnabled" @click="handleRedo"></el-button>
            </el-button-group>
            
            <el-radio-group class="ml-5 mr-5" v-model="formConfig.layoutType">
                <el-radio-button plain label="PC" value="PC" @click="changeLayoutType('PC')"/>
                <el-radio-button plain label="H5" value="H5" @click="changeLayoutType('H5')"/>
            </el-radio-group>

            <el-button icon="Guide"/>
        </div>
        <div class="toolbar-right">
            <el-button link type="primary" icon="Delete" @click="clearFormWidget">清空</el-button>
            <el-button link type="primary" icon="View" @click="preview">预览</el-button>
            <el-button link type="primary" @click="handleImport">导入JSON</el-button>
            <el-button link type="primary" @click="handleExport">导出JSON</el-button>
        </div>
    </div>

    <!-- 导出弹窗显示 -->
    <export-dialog
        ref="exportDialogRef"
        :designer="designer"
    />
    <!-- 导入弹窗显示 -->
    <import-dialog
        ref="importDialogRef"
        :designer="designer"
    />
</template>

<script setup>
import { computed,ref,provide} from 'vue';
import exportDialog from './components/exportDialog.vue';
import importDialog from './components/importDialog.vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    formConfig:{
        type:Object,
        default:()=>({})
    }
})


const exportDialogRef = ref(null)
const importDialogRef = ref(null)

const undoEnabled = computed(()=>{
    return !props.designer.undoEnabled()
})

const redoEnabled = computed(()=>{
    return !props.designer.redoEnabled()
})

const handleUndo = ()=>{
    props.designer.undoHistoryStep()
}

const handleRedo = ()=>{
    props.designer.redoHistoryStep()
}

const clearFormWidget = ()=>{
    if(!!props.designer){
        props.designer.clearDesigner() //清空设计器数据
    }
}

const preview = ()=>{
    router.push(`/preview/${props.formConfig.layoutType}`)
}
const handleImport = ()=>{
    const formate = {
        tip:"务必包含widgetList和formConfig字段，且遵循json格式",
    }
    importDialogRef.value.openDialog(JSON.stringify(formate, null, 2))
}

const handleExport = ()=>{
    const formate = {
        widgetList:props.designer.widgetList,
        formConfig:props.designer.formConfig
    }
    exportDialogRef.value.openDialog(JSON.stringify(formate, null, 2))
}

const changeLayoutType = (val)=>{
    props.designer.setLayoutType(val)
}
</script>

<style lang="scss" scoped>
.toolbar-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}
.toolbar-left{
    display: flex;
    align-items: center;
}
</style>
